<template>
	<view class="top-container"></view>
	<!-- 支付成功核心内容区 -->
	<view class="success-wrapper">
		<!-- 成功图标 -->
		<image src="/static/images/对 拷贝.png" class="success-icon" />
		<!-- 支付成功文字 -->
		<text class="success-text">支付成功</text>
		<!-- 支付金额 -->
		<text class="amount">29.90</text>
		<!-- 预约编号 -->
		<text class="order-no">预约编号：121212112487878</text>
		<!-- 按钮组 -->
		<view class="btn-group">
			<view class="btn home-btn" @click="toHome">返回首页</view>
			<view class="btn detail-btn" @click="toOrderDetail">订单详情</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 返回上一页
			    goBack() {
			      uni.navigateBack();
			    },
			    // 跳转首页
			    toHome() {
			      uni.reLaunch({ url: '/pages/index/index' }); // 替换为实际首页路径
			    },
			    // 跳转订单详情
			    toOrderDetail() {
			      uni.navigateTo({ url: '/professional-car-wash/pages/order-success/order-success' }); // 替换为实际详情页路径
			    }
		}
	}
</script>

<style>
	.top-container {
		background-color: #2176F3;
		height: 350rpx;
	}
	/* 支付成功内容容器 */
	.success-wrapper {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  background-color: #fff;
	  border-radius: 20rpx;
	  margin: 40rpx 20rpx;
	  padding: 60rpx 20rpx;
	  margin-top: -350rpx;
	}
	.success-icon {
	  width: 120rpx;
	  height: 120rpx;
	  margin-bottom: 30rpx;
	}
	.success-text {
	  font-size: 32rpx;
	  margin-bottom: 20rpx;
	}
	.amount {
	  font-size: 48rpx;
	  font-weight: bold;
	  margin-bottom: 40rpx;
	}
	.order-no {
	  font-size: 28rpx;
	  color: #666;
	  margin-bottom: 60rpx;
	}
	
	/* 按钮组 */
	.btn-group {
	  display: flex;
	  flex-direction: column;
	  width: 100%;
	  align-items: center;
	}
	.btn {
	  width: 600rpx;
	  height: 80rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 40rpx;
	  font-size: 32rpx;
	  margin-bottom: 30rpx;
	  color: #fff;
	}
	.home-btn {
	  background-color: #2176F3;
	}
	.detail-btn {
	  background-color: #ccc;
	}
</style>